<script setup lang="ts">
import { createSubject } from '@/api/subject';
import type { Subject } from '@/api/subject/type';
import { showToast, UploaderFileListItem } from 'vant';
import { ref } from 'vue';
import Required from '@/components/icons/Required.vue';
import { Result } from '@/utils/request';
import { router } from '@/router';

const subject = ref({
    name: '',
    description: ''
} as Subject);

const file = ref({
    url: '',
    avatar: null as File | null
});

const isSubmitting = ref(false);

const afterRead = (uploader: UploaderFileListItem | UploaderFileListItem[]) => {
    if (!Array.isArray(uploader) && uploader.objectUrl != undefined && uploader.file != undefined) {
        file.value.url = uploader.objectUrl;
        file.value.avatar = uploader.file;
    }
}

const onSubmit = () => {
    if (!subject.value.name.trim()) {
        showToast('请输入题目集名称');
        return;
    }

    if (!file.value.avatar) {
        showToast('请上传题目集封面图片');
        return;
    }

    isSubmitting.value = true;
    createSubject(subject.value, file.value.avatar).then((res) => {
        const {msg} = res as Result;
        showToast(msg);
        router.back();
    }).finally(() => {
        isSubmitting.value = false;
    });
}

const handleBack = () => {
    router.back();
}
</script>

<template>
    <div class="create-subject-page">
        <div class="page-header">
            <div class="back-action" @click="handleBack">
                <van-icon name="arrow-left" />
                <span>返回题目集列表</span>
            </div>
            <h1 class="page-title">创建题目集</h1>
        </div>
        
        <div class="create-form">
            <div class="form-section">
                <div class="upload-section">
                    <h3 class="section-title">
                        题目集封面
                        <Required />
                    </h3>
                    <div class="uploader-container">
                        <van-uploader 
                            :after-read="afterRead" 
                            :max-count="1"
                            :preview-size="150"
                            upload-icon="photograph"
                            upload-text="上传封面图片"
                        >
                            <template #preview-cover="{ file }">
                                <div class="preview-cover">
                                    <img :src="file.objectUrl || file.url" class="image-preview" />
                                </div>
                            </template>
                        </van-uploader>
                        <div class="upload-tips">
                            <p>建议上传比例为 1:1 的图片</p>
                            <p>大小不超过 2MB</p>
                        </div>
                    </div>
                </div>
                
                <div class="input-section">
                    <h3 class="section-title">
                        题目集信息
                    </h3>
                    <van-cell-group inset>
                        <van-field
                            v-model="subject.name"
                            label="题目集名称"
                            placeholder="请输入名称（不超过20字）"
                            required
                            maxlength="20"
                            :disabled="isSubmitting"
                            :rules="[{ required: true, message: '请填写题目集名称' }]"
                        />
                        <van-field
                            v-model="subject.description"
                            label="题目集简介"
                            type="textarea"
                            placeholder="请输入题目集简介（不超过200字）"
                            maxlength="200"
                            rows="4"
                            show-word-limit
                            :disabled="isSubmitting"
                        />
                    </van-cell-group>
                    
                    <div class="form-actions">
                        <van-button 
                            :disabled="isSubmitting || !subject.name"
                            round 
                            block 
                            type="primary" 
                            @click="onSubmit"
                            :loading="isSubmitting"
                            loading-text="创建中"
                        >
                            创建题目集
                        </van-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.create-subject-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    
    .page-header {
        margin-bottom: 24px;
        
        .back-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #606266;
            cursor: pointer;
            padding: 8px 0;
            font-size: 14px;
            margin-bottom: 8px;
            
            &:hover {
                color: #409eff;
            }
        }
        
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #303133;
            margin: 0;
        }
    }
    
    .create-form {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        padding: 24px;
        
        .form-section {
            display: grid;
            grid-template-columns: 220px 1fr;
            gap: 32px;
            
            @media (max-width: 768px) {
                grid-template-columns: 1fr;
            }
            
            .section-title {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 16px;
                font-weight: 500;
                color: #303133;
                margin: 0 0 16px 0;
            }
            
            .upload-section {
                .uploader-container {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 16px;
                    
                    .preview-cover {
                        width: 150px;
                        height: 150px;
                        border-radius: 8px;
                        overflow: hidden;
                        
                        .image-preview {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    
                    .upload-tips {
                        font-size: 12px;
                        color: #909399;
                        
                        p {
                            margin: 4px 0;
                        }
                    }
                }
            }
            
            .input-section {
                .form-actions {
                    margin-top: 32px;
                    
                    .van-button {
                        height: 44px;
                        font-size: 16px;
                    }
                }
            }
        }
    }
}
</style>